<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>查看订单</title>
    <!--导入外部的JS-->
    <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/progressStep.js"></script>
    <script type="text/javascript" src="js/raphael.js"></script>
    <script type="text/javascript" src="js/jquery.bpopup.js"></script>
    <!--导入外部的CSS-->
    <link type="text/css" rel="stylesheet" href="css/step.css"/>
    <link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>
    <link type="text/css" rel="stylesheet" href="css/viewOrder.css"/>
    
<script type="text/javascript">
var showTickets=function(i){
	var div=$("#popDiv");
	div.empty();
	//以Jquery创建新元素
	var iframe=document.createElement("iframe");
	iframe.setAttribute("src","orderDetails.html");
	iframe.setAttribute("scroll","no");
	iframe.setAttribute("height","540px");
	iframe.setAttribute("width","700px");
	div.append(iframe);
	$("#popDiv").bPopup();
}

$(document).ready(function () {
	var $progressDiv = $("#progressBar");
	var $progressBar = $progressDiv.progressStep();
	$progressBar.addStep("浏览影片");
	$progressBar.addStep("选择场次");
	$progressBar.addStep("选择座位");
	$progressBar.addStep("提交订单");
	$progressBar.addStep("查看订单");
	
	//控制步骤
	$progressBar.setCurrentStep(4);
	$progressBar.refreshLayout();
	

});
</script>
</head>

<body>
	<header class="navbar navbar-inverse navbar-static-top" role="navigation">
     <div class="container ">
    	<nav class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">VeryEdu 影院订票系统</a>
  		</nav>
       </div>
    </header>
   
    
    <section class="container">
    	<nav id="progressBar" style="height:80px;margin-top:0px;"></nav>
        <table class="table  table-hover table-bordered"  >
        	<thead>
            	   <th>订单编号</th>
            	   <th>影片</th>
            	   <th>日期</th>
                   <th>放映影厅</th>
                   <th>票种</th>
                   <th>合计</th>
                   <th>影片状态</th>
                   <th>操作</th>
            </thead>
            
            <tr onClick="showTickets(1001)">
            	<td>1001</td>
            	<td><img src="images/The-Mask.jpg" width="50px" height="50px" />变相怪杰</td>
                <td>2010-10-11</td>
                <td>1号大厅</td>
                <td>团体票</td>
                <td>￥36</td>
                <td>已上映</td>
                <td><a href="#" class="btn btn-primary" role="button">付款</a></td>
            </tr>
            
             <tr>
             	<td>1002</td>
            	<td><img src="images/The-Mask.jpg" width="50px" height="50px" />变相怪杰</td>
                <td>2010-10-11</td>
                <td>1号大厅</td>
                <td>团体票</td>
                <td>￥36</td>
                <td>已上映</td>
                <td><a href="#" class="btn btn-primary" role="button">退票</a>
                </td>
            </tr>
            <tr>
            	<td>1003</td>
            	<td><img src="images/The-Mask.jpg" width="50px" height="50px" />变相怪杰</td>
                <td>2010-10-11</td>
                <td>1号大厅</td>
                <td>团体票</td>
                <td>￥36</td>
                <td>已上映</td>
                <td><a href="#" class="btn btn-primary" role="button">付款</a></td>
            </tr>
        </table>
        
       <div id="popDiv" style=" background-color:#FFF; border:1px solid #000; display:none;"></div>
    </section>


    <footer class="text-center" >
        <p >&copy;company 2014</p>
    </footer>
</body>
</html>
